<!DOCTYRE hstml>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>
        动态效果
    </title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }

    </style>
</head>
    <body>
    <div>
        <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">

    </div>
    <table id="tb">
        <caption>学生列表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void (0);" onclick="this">删除</a> &nbsp;  <a href="JavaScript:void (1);" onclick="this">修改</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void (0);" onclick="this">删除</a> &nbsp;  <a href="JavaScript:void (1);" onclick="this">修改</a></td>

        </tr>
    </table>
    </body>
<script>
    document.getElementById("add").onclick=function (){
        let name=document.getElementById("name").value;
        let age=document.getElementById("age").value;
        let gender=document.getElementById("gender").value;

        document.getElementById("tb").innerHTML +=
            `<tr><td>${name}</td><td>${age}</td><td>${gender}</td><td><a href="JavaScript:void (0);" onclick="drop(this)">删除</a> &nbsp; <a href="JavaScript:void (1);" onclick="drop(this)">修改</a></td></tr>`;
    };
    function drop(obj){
        obj.parentElement.parentElement.parentElement.removeChild(obj.parentElement.parentElement);
    }
  /*  var element = document.getElementById("tb").value="修改";
    element.innerHTML = <tr><td>${name}</td><td>${age}</td><td>${gender}</td></tr>;*/





</script>


</html>
